<template>
	<div>
		<router-link class="header-abs" tag="div" to="/" v-show="showAbs">
			<div class="iconfont header-abs-back">&#xe624;</div>
		</router-link>
		<div class="header-fixed" v-show="!showAbs" :style="opacityStyle">			
			<router-link to="/">
				<div class="iconfont header-fixed-icon">&#xe624;</div>
			</router-link>
			景点详情
		</div>
	</div>
</template>
<script>
export default{
	name: 'DetailHeader',
	data (){
		return{
			showAbs:true,
			// 定义动态动画属性
			opacityStyle:{
				opacity:0
			}
		}
	},
	methods:{
		handelScroll (){
			const top = document.documentElement.scrollTop;
			if(top > 60){
				let opacity = top /140;
				opacity = opacity > 1 ? 1 : opacity;
				this.opacityStyle = { opacity };
				this.showAbs = false;
			}else{
				this.showAbs = true;
			}
		}
	},
	activated (){
		// 页面展示监听页面滚动事件
		window.addEventListener('scroll',this.handelScroll)
	},
	deactivated (){
		// 页面隐藏移除页面滚动事件
		window.removeEventListener('scroll',this.handelScroll)
	}
}
</script>
<style scoped>
	.header-abs{
		position: absolute;
		left: .2rem;
		top: .2rem;
		width:.8rem;
		height: .8rem;
		line-height: .8rem;
		border-radius: .4rem;
		text-align: center;
		background: rgba(0,0,0,.8);
	}
	.header-abs-back{
		color: #fff;
		font-size: .4rem;
	}
	.header-fixed{
		z-index: 2;
		height: .86rem;
		line-height: .86rem;
		color: #fff;
		background-color: #00bcd4;
		font-size: .32rem;
		text-align: center;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
	}
	.header-fixed-icon{
		width: .64rem;
		text-align: center;
		font-size: .4rem;
		position: absolute;
		top: 0;
		left: 0;
		color: #fff;
	}
</style>